@require "../../css/variables.styl"
@require "../../css/mixin.styl"

.va-menu
  background $color-menu-background
  color color-yiq($color-menu-background)
  font-size $font-size-menu
  user-select none
  ul
    list-style none
    padding 0
    margin 0

.va-menu-title
  position relative
  text-align left
  line-height $height-menu-item
  height $height-menu-item
  padding-left 10px
  padding-right 40px
  white-space nowrap
  overflow hidden
  text-overflow ellipsis
  cursor pointer
  transition background .15s ease-in-out, color .15s ease-in-out
  &.active
    color $color-menu-active
  &.has-children
    &:after
      transition transform .15s ease-in-out
      position absolute
      right 10px
      top 50%
      font-size 14px
      line-height 1
      height 14px
      margin-top -(@height/2)
      display block
      content '\e765'
      font-family $font-name !important
      -webkit-font-smoothing antialiased
      -moz-osx-font-smoothing grayscale
      transform rotate(180deg)
    &.expanded
      &:after
        transform rotate(0)




.va-menu-group
  >.va-menu-title
    font-size $font-size-menu-group
    color alpha(color-yiq($color-menu-background), .4)
    cursor default
    line-height $height-menu-item - 20px
    height $height-menu-item - 20px

.va-menu-item
  >.va-menu-title
    &:hover
      background darken($color-menu-background, 20%)

for i in 1..5
  .va-menu-lv-{i}
    >li>.va-menu-title
      padding-left i * 20px
